<template>
  <div>
    <div>椭圆、圆</div>

    <div ref="webgl" id="webgl" style="width: 800px; height: 500px"></div>
  </div>
</template>
<script lang="ts" setup>
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons';
  import { onMounted, ref } from 'vue';

  const webgl: any = ref(null);
  onMounted(() => {
    init();
  });

  function init() {
    const scene = new THREE.Scene();
    const width = 500;
    const height = 300;
    const camera = new THREE.PerspectiveCamera(30, width / height, 1, 10000);
    camera.position.set(-100, 300, 300);
    camera.lookAt(scene.position);
    const render = new THREE.WebGLRenderer();
    render.setSize(width, height);
    // console.log(' webgl.value', webgl.value);

    webgl.value.appendChild(render.domElement);
    // document.body.appendChild(render.domElement);
    new OrbitControls(camera, render.domElement);
    const amLight = new THREE.AmbientLight(0xffffff);
    scene.add(amLight);
    const helper = new THREE.AxesHelper(200);
    scene.add(helper);
    // 参数1和2表示椭圆中心坐标  参数3和4表示x和y方向半径
    const curve = new THREE.EllipseCurve(0, 0, 100, 50, 0, Math.PI / 2);

    const points = curve.getPoints(50);
    console.log('cur', points);

    const geometry = new THREE.BufferGeometry().setFromPoints(points);

    const materialPoint = new THREE.PointsMaterial({
      color: 0xff1122,
    });
    const meshPoint = new THREE.Points(geometry, materialPoint);
    meshPoint.position.z = 20;
    scene.add(meshPoint);

    const material = new THREE.LineBasicMaterial({
      color: 0xff1122,
    });

    const materialMesh = new THREE.Line(geometry, material);
    scene.add(materialMesh);

    function renderFun() {
      render.render(scene, camera);
      requestAnimationFrame(renderFun);
    }
    renderFun();
  }
</script>
